<template>
  <template v-if="menuItem.children">
    <el-sub-menu :index="menuItem.index">
      <template #title>
        <el-icon v-if="menuItem.icon">
          <component :is="menuItem.icon" />
        </el-icon>
        <span>{{ menuItem.title }}</span>
      </template>
      <SubMenu
        v-for="child in menuItem.children"
        :key="child.index"
        :menu-item="child"
      />
    </el-sub-menu>
  </template>
  <template v-else>
    <el-menu-item :index="menuItem.index" :route="menuItem.route">
      <el-icon v-if="menuItem.icon">
        <component :is="menuItem.icon" />
      </el-icon>
      <template #title>{{ menuItem.title }}</template>
    </el-menu-item>
  </template>
</template>

<script setup lang="ts">
import { type MenuItem } from './config'

defineProps<{
  menuItem: MenuItem
}>()
</script>